<template>
    <div id='tmpl'>
        <!--1.0 父组件新闻详情部分-->
        <div class="title">
            <h4>{{info.title}}</h4>
            <p>{{info.add_time | datafmt('YYYY-MM-DD')}}  &nbsp;&nbsp;&nbsp;&nbsp;{{info.click}}次浏览量</P>
        </div>
        <div class="content" v-html='info.content'>
            <!--{{info.content}}    这里不能用插值表达式,因为内容里面有语义化标签,如果这样写会直接把他们渲染出来   -->
        </div>

        <!--2.0.2 子组件评论组件部分-->
        <!--
            comment标签:指的是下面子组件中的comment自定义属性,通过它可以拿到导入的comment组件对象,然后把组件对象中的模板渲染到这个父组件这个模板中
            第一个id:comment标签中的自定义属性名,这个属性名要和commen.vue中的prop:['id']保持一致,通过它才能把父组件中的id传递到子组件中
            第二个id:就是下面data方法中的id值
        -->
        <!--<comment v-bind:id='id'></comment>-->
        <!--可以简写为-->
        <comment :id='id'></comment>
    </div>
</template>
<script>
//2.0 导入评论组件
import comment from '../subcom/comment.vue';

export default {
    data() {
        return {
            id:0,
            info:{

            }
        }
    },
    created(){
        // 获取url传入的id参数值并复制给id属性
        this.id = this.$route.params.id;
        //请求服务器获取到这个id对应的详情数据对象
        this.getinfo();
    },
    methods:{
        getinfo:function(){
            var url = this.$common.apidomain+'/api/getnew/'+this.id;
            this.$http.get(url).then(function(response){
                var data = response.body;
                if(data.status !== 0){
                    Toast(data.message)
                    return;
                 }
                this.info = data.message[0];
            })         
        }
    },
    // 2.0.1 定义子组件
    components:{
        //注册评论组件
        //es6的写法,相当于:comment:comment  第一个comment是自定义的一个属性,第二个comment是上面导入的comment组件对象 
        comment      

    }
}
</script> 
<style scoped>
    .title h4{
        color: #26a2ff;
    }
    .title p{
        color:rgba(0,0,0,0.5);
    }
    .title,.content{
        padding:5px;
    }
</style>